<template>
  <div class="orderAfterSale">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="售后中" name="first" />
      <el-tab-pane label="已完成" name="second" />
    </el-tabs>
    <div class="sub-main" v-loading="listLoading">
      <AftersaleList
        :afterSaleList="afterSaleList"
        :page="page"
        @handle-current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { defineComponent, onBeforeMount, reactive, ref, shallowRef } from 'vue'

import AftersaleList from '@/components/base/AfterSaleList/index.vue'

import {
  getAfterSaleList
} from '@/api/user/afterSale.js'

defineComponent({
  name: 'OrderAfterSale'
})

let activeName = shallowRef('first');

let afterSaleList = ref([]);
let page = reactive({
  page: 1,
  pageSize: 5,
  total: 0,
})
let query = reactive({
  state: 1
})
let listLoading = shallowRef(false);

function getAfterSale () {
  listLoading.value = true
  getAfterSaleList({
    state: query.state,
    page: page.page,
    pageSize: page.pageSize
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      afterSaleList.value = res.data && res.data.list || []
      page.total = res.data && res.data.total || 0
    }
  }).catch(err => ElMessage.error(err.message))
    .finally(() => listLoading.value = false)
}
// 切换列表
function handleClick (event) {
  query.state = Number(event.index) + 1
  page.page = 1
  getAfterSale()
}
// 分页器跳转
function handleCurrentChange (val) {
  query.page = val
  getAfterSale()
}

onBeforeMount(() => {
  getAfterSale()
})
</script>
<style lang="scss" scoped>
.orderAfterSale {
  width: 100%;
  font-size: 14px;
  box-sizing: border-box;
  position: relative;

  :deep(.el-tabs) {
    .el-tabs__header {
      border: 1px solid #E5E5E5;
      margin-bottom: 30px;
      height: 56px;
    }

    .el-tabs__nav {
      margin-left: 20px;
      height: 56px;
    }

    .el-tabs__item {
      height: 56px;
      line-height: 56px;
    }

    .el-tabs__nav-wrap::after {
      height: 0;
    }
  }

  :deep(.search) {
    font-size: 12px;
    margin-right: 20px;
    display: flex;
    position: absolute;
    height: 56px;
    display: flex;
    align-items: center;
    top: 0;
    right: 0;

    .el-input {
      flex: 3;
      border-radius: 0;

      .el-input__inner {
        border-radius: 0;
      }

      .el-input-group__append {
        border-radius: 0;
        border-left: 0;

        .el-button {
          border-left: 0;
        }
      }
    }

    .el-select {
      flex: 1;
      border-radius: 0;
      height: 40px;
    }
  }
}

.sub-main {
  min-height: 400px;
}
</style>
